<template>
  <Teleport to="body" v-if="dialogVisible">
    <div class="background_modal">
      <div class="model_box">
        <header>
            <div class="exit">
                <div class="exit-btn" @click="close">
                    <img src="@/assets/img/close.png" alt="">
                </div>
            </div>
        </header>
        <div>
            <slot name="title"></slot>
        </div>
        <main class="main-box">
          <slot class="main-box-solt"></slot>
        </main>
        <footer> 
            <slot name="footer">
            </slot>
        </footer>
      </div>
    </div>
  </Teleport>
</template>
<script setup lang="ts">
import {defineEmits,defineProps} from 'vue'
const prop = defineProps(['dialogVisible'])
const emit =defineEmits()

const close = ()=>{
    console.log('关闭');
    emit('update:dialogVisible',false)
}

</script>
<style scoped lang="scss">

.background_modal{
    width: 100vw;
    height: 100vh;
    background: rgba($color: #000000, $alpha: .6);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    .model_box{
        width: 350px;
        height: 300px;
        padding: 15px;
        border-radius: 0.8vw;
        background: #fff;
        padding:20px 20px;

        // margin: auto ;

        header{
            display: flex;
            justify-content: right;
        }
        .main-box{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
        }
    }
}

.exit-btn{
  cursor: pointer;
}

</style>